'use client'

import { useEffect, useRef } from 'react'
import { motion, useInView } from 'framer-motion'
import KeyboardCard from './KeyboardCard'

const keyboards = [
  {
    id: 1,
    name: "Mechanical Master K1",
    price: 159.99,
    image: "https://images.unsplash.com/photo-1601445638532-3c6f6c3aa1d6",
    description: "Premium mechanical keyboard with RGB backlight"
  },
  {
    id: 2,
    name: "Pro Gaming K2",
    price: 189.99,
    image: "https://images.unsplash.com/photo-1595044426077-d36d9236d54a",
    description: "Professional gaming keyboard with macro keys"
  },
  {
    id: 3,
    name: "Wireless Elite K3",
    price: 199.99,
    image: "https://images.unsplash.com/photo-1587829741301-dc798b83add3",
    description: "Wireless mechanical keyboard with long battery life"
  }
]

export default function KeyboardGrid() {
  const ref = useRef(null)
  const isInView = useInView(ref, { once: true })

  return (
    <section ref={ref} className="py-20 px-4 bg-gray-50">
      <div className="max-w-7xl mx-auto">
        <motion.div
          initial={{ opacity: 0, y: 20 }}
          animate={isInView ? { opacity: 1, y: 0 } : { opacity: 0, y: 20 }}
          transition={{ duration: 0.8 }}
          className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8"
        >
          {keyboards.map((keyboard) => (
            <KeyboardCard key={keyboard.id} keyboard={keyboard} />
          ))}
        </motion.div>
      </div>
    </section>
  )
} 